
<template>
  <div class="dia-box">
    <el-dialog v-model="dialogVisible" title="历史考勤" width="1000px">
      <div class="content">
        <div class="name">
          <div>班级名称：{{ attendanceInfo.className }}</div>
          <div>课次：{{ attendanceInfo.classTime }}</div>
        </div>
        <div class="student-list">
          <div class="item" v-for="(item, index) in attendanceInfo.timeList" :key="index">
            <div class="item-name cursor" @click="viewsDetail(item)">{{ item.startTime }}</div>
            <div class="status_b">
              <div>{{ item.state === 0 ? '正常打卡' : item.state === 1 ? '缺勤' : '未考勤' }}</div>
            </div>
          </div>
        </div>
        <div>
          <MyDialog ref="dialogRef"/>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">保存</el-button>
          <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import { ref, defineExpose, getCurrentInstance } from 'vue'
  import MyDialog from './MyDialog.vue';
  const { proxy } = getCurrentInstance()

  const attendanceInfo = ref({
    className: "测试",
    classTime: 52,
    timeList: [
      {startTime: "2023-03-01", state: 1},
      {startTime: "2023-03-02", state: 1},
      {startTime: "2023-03-03", state: 1},
      {startTime: "2023-03-04", state: 1}
    ]
  })

  const dialogVisible = ref(false)
  const dialogRef = ref(null)

  const viewsDetail = (row) => {
    const transmitRow = {
      attendanceId: row.attendanceId,
      courseTime: row.courseTime,
      className: attendanceInfo.value.className,
      startTime: row.startTime
    }
    dialogRef.value.openMyDialog(transmitRow)
  }

  const openDialog = (row) => {
    attendanceInfo.value = row
    attendanceFindDetail()
    dialogVisible.value = true
  }

  const attendanceFindDetail = () => {
    const data = {
      classId: attendanceInfo.value.id,
      teacherId: attendanceInfo.value.teacherId
    }
    proxy.$API.student.attendanceFindDetail.get(data).then(res => {
      console.log(res);
      attendanceInfo.value.timeList = res.data
    })
  }

  defineExpose({openDialog})
</script>

<style lang="scss" scoped>
.dia-box {
  .content {
    height: 550px;
    overflow-y: auto;
    .name {
      display: flex;
      background: #f0f4f7;
      padding: 10px 10px;
      &>div {
        margin: 0 10px;
        color: #333;
        line-height: 30px;
      }
    }
    .batch-btn {
      margin: 15px 20px;
      display: flex;
      align-items: center;
      &>div:nth-child(2) {
        color: #ff4a3f;
        margin: 0 10px;
      }
    }
    .student-list {
      margin:0 20px;
      .item {
        font-size: 14px;
        display: flex;
        margin: 10px 0;
        .item-name {
          min-width: 108px;
          padding: 0 10px;
          height: 38px;
          color: #6b6b8a;
          border: 1px solid #999;
          background-color: #f8f8f8;
          text-align: center;
          line-height: 38px;
          margin-right: 15px;
        }
        .status {
          display: flex;
          margin-right: 15px;
          &>div {
            width: 56px;
            color: #b7b7b7;
            background: #ebebeb;
            border: 1px solid #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 39px;
          }
        }
        .status_b {
          display: flex;
          &>div {
            width: 54px;
            color: #b7b7b7;
            text-align: center;
            height: 39px;
            line-height: 39px;
            color: #a2a2a2;
          }
          &>div:nth-child(1) {
            background: #f9f9f9;
            border: 1px solid #ccc;
            color: #888;
          }
        }
      }
    }

    .img-content {
      .imges {
        height: 440px;
        overflow-y: auto;
        padding: 20px;
        text-align: center;
        font-size: 14px;
        color: #666666;
      }
      .btn {
        text-align: center;
        padding: 15px 0;
      }
    }
  }
  ::v-deep .el-dialog__body {
    border-top: 1px #cfcfcf solid;
    padding: 0;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
    border-top: 1px solid #cfcfcf;
    background: #f0f4f7;
    padding: 15px 0;
  }
}
</style>